<template>
  <div>
    <el-table :data="list" style="width: 100%" border :span-method="objectSpanMethod">
      <el-table-column width="100" prop="typeName"></el-table-column>
      <el-table-column width="150" prop="name"></el-table-column>
      <el-table-column width="100" label="当月新增">
        <el-table-column width="130" label="首贷户数户数" prop="value1"></el-table-column>
      </el-table-column>
      <el-table-column label="当月用信情况">
        <el-table-column width="100" label="授信金额" prop="value2" />
        <el-table-column width="100" label="贷款余额" prop="value3" />
      </el-table-column>

      <el-table-column width="150" label="累计新增">
        <el-table-column width="130" label="首贷户数户数" prop="value4"></el-table-column>
      </el-table-column>
      <el-table-column label="累计用信情况">
        <el-table-column width="100" label="授信金额" prop="value5" />
        <el-table-column width="100" label="贷款余额" prop="value6" />
      </el-table-column>
      <el-table-column label="加权">
        <el-table-column width="100" label="利率" prop="value7"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { Table, TableColumn } from "element-ui";
import { getFirstLoanStatistics1 } from "@/api/first-loan.js";
export default {
  name: "tab1",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn
  },
  props: {
    month: String
  },
  data() {
    return {
      list: [],
      spanArray: []
    };
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex == 0) {
          return;
        }
        if (!this.spanArray.includes(rowIndex)) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
        let index = this.spanArray.findIndex(value => value === rowIndex);
        let rowspan = 0;
        if (index + 1 === this.spanArray.length) {
          rowspan = this.list.length - this.spanArray[index];
        } else {
          rowspan = this.spanArray[index + 1] - this.spanArray[index];
        }
        return {
          rowspan: rowspan,
          colspan: 1
        };
      }
    },
    refreshTable() {
      getFirstLoanStatistics1(this.month)
        .then(res => {
          this.list = res;
          let spanMap = new Map();
          this.list.forEach((item, index) => {
            if (index === 0) {
              return;
            }
            if (spanMap.has(item.typeName)) {
              return;
            } else {
              spanMap.set(item.typeName, index);
            }
          });
          for (let values of spanMap.values()) {
            this.spanArray.push(values);
          }
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  },
  watch: {
    month() {
      this.refreshTable();
    }
  },
  mounted() {
    this.refreshTable();
  }
};
</script>
<style lang="stylus" scoped></style>